<script setup lang="ts">
import {Delete} from '@element-plus/icons-vue';
</script>

<template>
  <el-card class="voice-card" shadow="hover">
    <template #header>
      <span>虚拟声音名称</span>
    </template>
    <template #default>
      <div class="audio_box">
        <audio class="audio_main" ref="audioRef" controls>
          <source src="/Love%20Story.mp3" type="audio/mpeg"/>
        </audio>
      </div>
    </template>
    <template #footer>
      <div style="height: 30px;">
        <el-button circle type="danger">
          <el-icon><delete /></el-icon>
        </el-button>
      </div>
    </template>
  </el-card>
</template>

<style scoped lang="scss">
.voice-card {
  width: 290px;
  height: 180px;
}

.audio_box {
  width: 250px;
  border-radius: 0;
}

.audio_main {
  width: 270px;
  border-radius: 0;
}
</style>